<template>
  <div>
    <!-- 首页面 -->
    <!-- 轮播图 -->
    <div class="slideshow">
      <Slideshow />
      <!-- 二级导航 -->
      <div class="nav_two">
        <NavTwo></NavTwo>
      </div>
    </div>

    <div class="list_card">
      <p class="list_card_title">
        <span>全民砍价</span>
        <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <ListCard :goods="list"></ListCard>
    </div>
    <div>
      <p class="list_card_title">
        <span>精选专题</span>
        <span>
          <van-icon name="arrow" />
        </span>
      </p>
      <Slide :goods="listSlide"></Slide>
    </div>
  </div>
</template>

<script>
//轮播
import Slideshow from "../components/home/Slideshow";
//二级导航
import NavTwo from "../components/home/NavTwo";
//商品列表
import ListCard from "../components/home/ListCard";
//滑动
import Slide from "../components/home/Slide";
export default {
  components: {
    Slideshow,
    NavTwo,
    ListCard,
    Slide
  },
  data() {
    return {
      list: {},
      listSlide:[]
    };
  },
  //请求商品列表
  mounted() {
    this.$APIClient
      .getStoreList()
      .then(res => {
        //检测
        console.log(res.data.data.goodsMap);
        //赋值
        this.list = res.data.data.goodsMap;
      })
      .catch(error => {
        console.log(error);
      });
    this.$APIClient
      .getSlide()
      .then(res => {
        //检测
        console.log(res.data.data);
        //赋值
        this.listSlide = res.data.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
</script>

<style scoped>
.slideshow {
  width: 100%;
}
.nav_two {
  width: 100%;
  border-radius: 60px 60px 0px 0px;
  position: absolute;
  top: 3rem;
}
.list_card {
  /* border: 1px solid #000; */
  width: 100%;
  margin-top: 0.2rem;
}
.list_card_title {
  width: 100%;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  margin: 0.2rem;
}
.list_card_title span {
  font-size: 0.35rem;
}
.list_card_title span:nth-child(2) {
  line-height: 0.5rem;
}
</style>